Page Transition Animations in Flutter

Page Transition Animations are animations that control how one screen or route changes into another screen in a Flutter application. Instead of instantly replacing one page with another, a page transition can make the new screen slide, fade, scale, rotate, or combine multiple effects while entering the screen.

Flutter provides built-in route transitions through route classes such as MaterialPageRoute and CupertinoPageRoute. For custom transitions, Flutter provides PageRouteBuilder, which exposes animation objects that can be combined with Tween, Curve, and transition widgets such as SlideTransition and FadeTransition.

1. What is a Page Transition?

A page transition is the visual animation that occurs when navigating from one route to another.

For example, when a user taps a button and opens a new screen, the new screen can:

• Slide from the right.
• Slide from the bottom.
• Fade into view.
• Scale into view.
• Rotate into view.
• Combine multiple animation effects.

Screen A
   ↓
User taps button
   ↓
Navigator.push()
   ↓
Page Transition Animation
   ↓
Screen B

2. Why Use Page Transition Animations?

Page transitions help make navigation feel connected and visually understandable. They can communicate that the application has moved from one piece of content to another.

• Improve navigation experience.
• Create smooth screen changes.
• Provide visual feedback after user interaction.
• Make applications feel more polished.
• Help establish a consistent visual language.
• Allow platform-specific navigation styles.
• Allow developers to create custom navigation effects.

3. Flutter Navigation and Routes

Flutter's Navigator manages a stack of routes. A route represents a screen or page in the application's navigation history.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const SecondScreen(),
  ),
);

Navigator.push() adds a new route to the navigation stack. The route determines how the new screen is presented. Flutter provides platform-oriented route classes such as MaterialPageRoute and CupertinoPageRoute.

4. Basic Page Navigation

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const SecondScreen(),
      ),
    );
  },
  child: const Text('Open Second Screen'),
)

In this example, MaterialPageRoute provides the route and its associated Material-style transition behavior.

5. MaterialPageRoute

MaterialPageRoute is commonly used for Material-based Flutter applications. It provides platform-appropriate transition and route behavior.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const DetailsScreen(),
  ),
);

The exact default transition behavior can depend on the platform and Flutter's current page-transition configuration.

6. CupertinoPageRoute

CupertinoPageRoute provides an iOS-style route transition.

Navigator.push(
  context,
  CupertinoPageRoute(
    builder: (context) => const DetailsScreen(),
  ),
);

When building Cupertino-style applications, this route can provide navigation behavior that follows the iOS visual language.

7. Material vs Cupertino Page Transitions

8. Common Types of Page Transitions

9. PageRouteBuilder

PageRouteBuilder is one of the main tools for creating custom page transitions. It provides a pageBuilder for creating the destination page and a transitionsBuilder for defining how that page enters the screen.

PageRouteBuilder(
  pageBuilder: (
    context,
    animation,
    secondaryAnimation,
  ) {
    return const SecondScreen();
  },
  transitionsBuilder: (
    context,
    animation,
    secondaryAnimation,
    child,
  ) {
    return child;
  },
)

10. Understanding pageBuilder

The pageBuilder callback creates the widget for the destination route.

pageBuilder: (
  context,
  animation,
  secondaryAnimation,
) {
  return const SecondScreen();
}

The child received by transitionsBuilder is the widget returned by pageBuilder. This child can then be passed into transition widgets such as FadeTransition or SlideTransition.

11. Understanding transitionsBuilder

The transitionsBuilder callback defines the animation applied to the destination page.

transitionsBuilder: (
  context,
  animation,
  secondaryAnimation,
  child,
) {
  return FadeTransition(
    opacity: animation,
    child: child,
  );
}

The animation parameter is an Animation that can drive the transition.

12. Understanding Animation Values

For a typical route transition, the animation progresses from approximately 0.0 to 1.0.

0.0
 ↓
Animation starts
 ↓
0.5
 ↓
Animation is halfway
 ↓
1.0
 ↓
Animation completes

This animation value can be transformed into other values using a Tween, CurveTween, or CurvedAnimation.

13. Tween in Page Transitions

A Tween defines a range between a starting value and an ending value.

const begin = Offset(1.0, 0.0);
const end = Offset.zero;

final tween = Tween(
  begin: begin,
  end: end,
);

For a slide transition, the Tween commonly works with Offset values.

14. Understanding Offset

Offset represents a two-dimensional position.

Offset(1.0, 0.0)

Common values for page slides include:

15. Slide Page Transition

A slide transition moves the destination page from one direction into its final position.

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return const SecondScreen();
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;

      final tween = Tween(
        begin: begin,
        end: end,
      );

      final offsetAnimation = animation.drive(tween);

      return SlideTransition(
        position: offsetAnimation,
        child: child,
      );
    },
  );
}

The general pattern is to use the route's animation as the progress value, map it to an Offset using a Tween, and provide that animation to SlideTransition.

16. Slide from Right

const begin = Offset(1.0, 0.0);
const end = Offset.zero;

The new page starts to the right of its final position and moves into the screen.

17. Slide from Left

const begin = Offset(-1.0, 0.0);
const end = Offset.zero;

The new page starts to the left and slides into the screen.

18. Slide from Bottom

const begin = Offset(0.0, 1.0);
const end = Offset.zero;

This creates a bottom-to-top page transition.

19. Slide from Top

const begin = Offset(0.0, -1.0);
const end = Offset.zero;

This makes the destination page slide downward from above.

20. Fade Page Transition

A fade transition gradually changes the opacity of the destination page.

Route _createFadeRoute() {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return const SecondScreen();
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  );
}

Fade transitions are useful when a subtle page change is preferred.

21. Scale Page Transition

A scale transition changes the size of the destination page during navigation.

Route _createScaleRoute() {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return const SecondScreen();
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return ScaleTransition(
        scale: animation,
        child: child,
      );
    },
  );
}

The page starts at a smaller scale and grows toward its final size.

22. Rotation Page Transition

A page can also rotate while entering the screen.

Route _createRotationRoute() {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return const SecondScreen();
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return RotationTransition(
        turns: animation,
        child: child,
      );
    },
  );
}

Rotation transitions should be used carefully because large rotations can make navigation feel less natural.

23. Combining Fade and Slide

Multiple transition widgets can be nested to create a combined effect.

transitionsBuilder: (
  context,
  animation,
  secondaryAnimation,
  child,
) {
  const begin = Offset(0.0, 1.0);
  const end = Offset.zero;

  final slideTween = Tween(
    begin: begin,
    end: end,
  );

  final slideAnimation = animation.drive(slideTween);

  return FadeTransition(
    opacity: animation,
    child: SlideTransition(
      position: slideAnimation,
      child: child,
    ),
  );
}

The page now both fades in and slides upward.

24. Using Curves

A linear animation can sometimes feel mechanical. Flutter's Curves class provides predefined easing curves that change the rate of animation over time.

Curves.easeIn
Curves.easeOut
Curves.easeInOut
Curves.fastOutSlowIn
Curves.linear

For example:

final curvedAnimation = CurvedAnimation(
  parent: animation,
  curve: Curves.easeInOut,
);

25. CurveTween

A CurveTween allows a curve to be chained with another Tween.

final tween = Tween(
  begin: const Offset(1.0, 0.0),
  end: Offset.zero,
).chain(
  CurveTween(
    curve: Curves.easeInOut,
  ),
);

The animation can then drive this combined tween.

return SlideTransition(
  position: animation.drive(tween),
  child: child,
);

26. CurvedAnimation

Another approach is to create a CurvedAnimation from the route animation.

final curvedAnimation = CurvedAnimation(
  parent: animation,
  curve: Curves.easeOut,
);

The curved animation can then be used with a Tween:

final tween = Tween(
  begin: const Offset(1.0, 0.0),
  end: Offset.zero,
);

return SlideTransition(
  position: tween.animate(curvedAnimation),
  child: child,
);

27. Understanding secondaryAnimation

The transitionsBuilder receives two animation values:

• animation represents the route's primary transition.
• secondaryAnimation represents the transition relationship with the route below or behind the current route.

transitionsBuilder: (
  context,
  animation,
  secondaryAnimation,
  child,
) {
  return child;
}

For many basic custom transitions, the primary animation is sufficient. More advanced route transitions can use both animations.

28. Navigator.push() with a Custom Route

Once a custom route function is created, pass it to Navigator.push().

Navigator.push(
  context,
  _createRoute(),
);

Example:

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      _createRoute(),
    );
  },
  child: const Text('Open Page'),
)

29. Complete Slide Transition Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  Route _createRoute() {
    return PageRouteBuilder(
      pageBuilder: (
        context,
        animation,
        secondaryAnimation,
      ) {
        return const SecondScreen();
      },
      transitionsBuilder: (
        context,
        animation,
        secondaryAnimation,
        child,
      ) {
        const begin = Offset(1.0, 0.0);
        const end = Offset.zero;
        const curve = Curves.easeInOut;

        final tween = Tween(
          begin: begin,
          end: end,
        ).chain(
          CurveTween(curve: curve),
        );

        return SlideTransition(
          position: animation.drive(tween),
          child: child,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              _createRoute(),
            );
          },
          child: const Text('Open Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: const Center(
        child: Text(
          'Welcome to the Second Screen',
          style: TextStyle(fontSize: 22),
        ),
      ),
    );
  }
}

30. Reusable Fade Route

Creating reusable route functions can prevent repeated transition code.

Route fadeRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return page;
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  );
}

Use it like this:

Navigator.push(
  context,
  fadeRoute(
    const SecondScreen(),
  ),
);

31. Reusable Slide Route

Route slideRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return page;
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;

      final tween = Tween(
        begin: begin,
        end: end,
      );

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

32. Reusable Scale Route

Route scaleRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return page;
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return ScaleTransition(
        scale: animation,
        child: child,
      );
    },
  );
}

33. Combined Scale and Fade Transition

Route scaleFadeRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return page;
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return FadeTransition(
        opacity: animation,
        child: ScaleTransition(
          scale: animation,
          child: child,
        ),
      );
    },
  );
}

34. Custom Transition Duration

PageRouteBuilder can define how long the route transition takes.

PageRouteBuilder(
  transitionDuration: const Duration(
    milliseconds: 500,
  ),
  pageBuilder: (
    context,
    animation,
    secondaryAnimation,
  ) {
    return const SecondScreen();
  },
  transitionsBuilder: (
    context,
    animation,
    secondaryAnimation,
    child,
  ) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  },
)

A shorter duration produces a faster transition, while a longer duration makes the movement more noticeable.

35. Reverse Transition Duration

You can also specify a separate reverse duration.

PageRouteBuilder(
  transitionDuration: const Duration(
    milliseconds: 500,
  ),
  reverseTransitionDuration: const Duration(
    milliseconds: 300,
  ),
  pageBuilder: (
    context,
    animation,
    secondaryAnimation,
  ) {
    return const SecondScreen();
  },
  transitionsBuilder: (
    context,
    animation,
    secondaryAnimation,
    child,
  ) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  },
)

This can make forward and backward navigation behave differently when that design is intentional.

36. Page Transition with Curve

Route _createRoute() {
  return PageRouteBuilder(
    transitionDuration: const Duration(
      milliseconds: 600,
    ),
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return const SecondScreen();
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      final curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeOutCubic,
      );

      return FadeTransition(
        opacity: curvedAnimation,
        child: child,
      );
    },
  );
}

37. Page Transition with Rotation and Fade

transitionsBuilder: (
  context,
  animation,
  secondaryAnimation,
  child,
) {
  return FadeTransition(
    opacity: animation,
    child: RotationTransition(
      turns: Tween(
        begin: 0.95,
        end: 1.0,
      ).animate(animation),
      child: child,
    ),
  );
}

This creates a subtle rotation combined with a fade.

38. Page Transition with Scale and Slide

transitionsBuilder: (
  context,
  animation,
  secondaryAnimation,
  child,
) {
  const begin = Offset(0.0, 0.2);
  const end = Offset.zero;

  final slideTween = Tween(
    begin: begin,
    end: end,
  );

  return SlideTransition(
    position: animation.drive(slideTween),
    child: ScaleTransition(
      scale: animation,
      child: child,
    ),
  );
}

39. Page Transition with Transform

For more customized effects, a route transition can use a Transform widget.

transitionsBuilder: (
  context,
  animation,
  secondaryAnimation,
  child,
) {
  return AnimatedBuilder(
    animation: animation,
    builder: (context, child) {
      return Transform.rotate(
        angle: animation.value * 0.2,
        child: child,
      );
    },
    child: child,
  );
}

40. Page Transition and Hero Animation

Page transitions and Hero animations solve different but complementary problems.

• Page transition: Controls how the route/page enters or leaves.
• Hero animation: Animates a shared element between two routes.

They can be used together. For example, a product details page can fade or slide into view while the product image simultaneously performs a Hero transition.

41. Page Transitions and Material Design

Flutter provides platform and Material transition builders that can be configured through PageTransitionsTheme. Different transition builders can be selected according to the target platform and desired navigation behavior.

42. PageTransitionsTheme

PageTransitionsTheme can be used to configure route transition builders for different platforms.

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: const PageTransitionsTheme(
      builders: {
        TargetPlatform.android:
            ZoomPageTransitionsBuilder(),
        TargetPlatform.iOS:
            CupertinoPageTransitionsBuilder(),
      },
    ),
  ),
  home: const HomeScreen(),
)

When using CupertinoPageTransitionsBuilder, import the Cupertino library:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

43. Platform-Specific Page Transitions

Flutter adapts navigation behavior to platform conventions. Android and iOS can therefore have different default transition styles.

44. Named Routes and Page Transitions

Named routes can be used for navigation. For applications requiring advanced navigation behavior, route configuration can be designed around the application's navigation architecture.

Navigator.pushNamed(
  context,
  '/details',
);

For custom transitions on a named route, route configuration can be designed to return an appropriate custom Route.

45. Page Transition Using a Custom Route Class

For applications with many custom transitions, a reusable route class can make the code cleaner.

class SlidePageRoute extends PageRouteBuilder {
  final Widget page;

  SlidePageRoute({
    required this.page,
  }) : super(
          pageBuilder: (
            context,
            animation,
            secondaryAnimation,
          ) {
            return page;
          },
          transitionsBuilder: (
            context,
            animation,
            secondaryAnimation,
            child,
          ) {
            const begin = Offset(1.0, 0.0);
            const end = Offset.zero;

            final tween = Tween(
              begin: begin,
              end: end,
            );

            return SlideTransition(
              position: animation.drive(tween),
              child: child,
            );
          },
        );
}

Use the custom route:

Navigator.push(
  context,
  SlidePageRoute(
    page: const SecondScreen(),
  ),
);

46. Page Transition Architecture

A useful way to understand a custom page transition is:

Navigator
    ↓
Route
    ↓
PageRouteBuilder
    ↓
pageBuilder
    ↓
Destination Widget

Animation
    ↓
Tween / Curve
    ↓
Transition Widget
    ↓
Animated Destination Page

47. Understanding the Animation Pipeline

The animation pipeline can be summarized as:

1. The Navigator starts a route transition.
2. The route provides an animation value.
3. The animation value is optionally modified by a curve.
4. A Tween maps the value into the desired type.
5. A transition widget consumes the resulting animation.
6. The destination page visually moves, fades, scales, or rotates.

Navigator
   ↓
Route Animation
   ↓
Curve
   ↓
Tween
   ↓
Transition Widget
   ↓
Destination Page

48. Common Transition Widgets

49. Page Transition with FadeTransition

return FadeTransition(
  opacity: animation,
  child: child,
);

This is one of the simplest custom route transitions.

50. Page Transition with SlideTransition

final tween = Tween(
  begin: const Offset(1.0, 0.0),
  end: Offset.zero,
);

return SlideTransition(
  position: animation.drive(tween),
  child: child,
);

51. Page Transition with ScaleTransition

return ScaleTransition(
  scale: animation,
  child: child,
);

52. Page Transition with RotationTransition

return RotationTransition(
  turns: animation,
  child: child,
);

53. Custom Page Transition with AnimationController

For most route transitions, the route's supplied animation is enough. You usually do not need to create a separate AnimationController just to animate the route.

Advanced animation systems may combine route animations with other animation controllers when additional independent motion is required.

54. Page Transition vs AnimatedContainer

55. Page Transition vs Hero Animation

56. Common Mistakes

Mistake 1: Using an Unnecessarily Complex Animation

A simple fade or slide may be enough for normal navigation. Avoid creating complicated transitions when they do not add meaningful value.

Mistake 2: Forgetting the Child

return FadeTransition(
  opacity: animation,
);

The destination page should normally be supplied as the transition's child.

Mistake 3: Ignoring Curves

A linear animation may feel mechanical. Consider a suitable easing curve when appropriate.

Mistake 4: Using Excessively Long Durations

Long transitions can make navigation feel slow.

Mistake 5: Creating a New AnimationController Unnecessarily

For basic route transitions, the route already provides an animation. Use it instead of adding unnecessary controller complexity.

Mistake 6: Ignoring Platform Conventions

A transition that looks appropriate on one platform may not match the expected navigation behavior of another platform.

57. Performance Considerations

• Keep route transitions short and purposeful.
• Avoid unnecessarily complex widget trees during transitions.
• Do not combine many expensive visual effects without a reason.
• Test transitions on lower-powered devices.
• Reuse route transition implementations when possible.
• Use Flutter's built-in transition widgets where they are sufficient.

58. Accessibility Considerations

Animations should support the user experience rather than make navigation harder to understand.

• Avoid excessive motion.
• Keep navigation transitions predictable.
• Use motion consistently throughout the application.
• Consider reduced-motion preferences and accessibility requirements when designing motion-heavy interfaces.
• Do not use animation as the only way to communicate important information.

59. Best Practices

1. Use built-in route transitions when they already meet the application's requirements.
2. Use PageRouteBuilder for custom route animations.
3. Keep animations consistent throughout the application.
4. Choose a suitable duration.
5. Use appropriate curves.
6. Prefer simple transitions for normal navigation.
7. Use Hero animations when a specific shared element should connect two screens.
8. Reuse common route transition implementations.
9. Consider platform-specific navigation conventions.
10. Test both forward and reverse navigation.

60. Practical Project: Animated Product Navigation

Create a product application with the following flow:

Product List
    ↓
Tap Product
    ↓
Slide + Fade Transition
    ↓
Product Details
    ↓
Back
    ↓
Reverse Transition

Suggested implementation:

• Use ListView for products.
• Use Navigator.push() for navigation.
• Use PageRouteBuilder for custom navigation.
• Use SlideTransition for page movement.
• Use FadeTransition for opacity.
• Use a Hero widget for the product image if a shared element effect is required.

61. Practical Project: Login to Dashboard

Create a login screen and dashboard screen.

• Start on the Login screen.
• Validate the login form.
• Navigate to Dashboard.
• Use a fade transition.
• Optionally combine fade and scale.

Navigator.pushReplacement(
  context,
  PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return const DashboardScreen();
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

62. Practical Project: Bottom-to-Top Modal Style Transition

Route bottomToTopRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return page;
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      const begin = Offset(0.0, 1.0);
      const end = Offset.zero;

      final tween = Tween(
        begin: begin,
        end: end,
      );

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

63. Practical Project: Image Details Screen

For an image gallery, combine a page transition with a Hero animation.

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (
      context,
      animation,
      secondaryAnimation,
    ) {
      return const ImageDetailsScreen();
    },
    transitionsBuilder: (
      context,
      animation,
      secondaryAnimation,
      child,
    ) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

The destination screen can contain a matching Hero widget for the selected image.

64. Debugging Page Transitions

During development, animation speed can be slowed down to make the transition easier to inspect.

timeDilation = 5.0;

A value of 1.0 represents normal animation speed. A higher value slows animation playback.

65. Page Transition Development Process

1. Decide why the page needs a transition.
2. Choose a simple transition type.
3. Choose an appropriate duration.
4. Choose a suitable curve.
5. Create a route using MaterialPageRoute, CupertinoPageRoute, or PageRouteBuilder.
6. If custom behavior is required, use transitionsBuilder.
7. Connect the animation to a transition widget.
8. Test forward navigation.
9. Test reverse navigation.
10. Test on the target platforms.

66. Quick Comparison

67. Interview Questions

Q1. What is a page transition in Flutter?

A page transition is the animation that occurs when moving from one route or screen to another.

Q2. What is PageRouteBuilder?

PageRouteBuilder is a route class that allows developers to define custom page content and custom route transition animations.

Q3. What is transitionsBuilder?

transitionsBuilder defines the animation used when the route enters or leaves the navigation stack.

Q4. What is pageBuilder?

pageBuilder creates the widget displayed by the destination route.

Q5. What is the purpose of Tween?

A Tween defines a range of values between a beginning value and an ending value and can convert the route animation's progress into values needed by a transition widget.

Q6. What is CurvedAnimation?

CurvedAnimation applies a curve to an animation so that its value changes according to a specified timing pattern.

Q7. What is SlideTransition?

SlideTransition animates the position of its child using an Animation of Offset values.

Q8. What is FadeTransition?

FadeTransition animates the opacity of its child.

Q9. Can multiple transition widgets be combined?

Yes. For example, FadeTransition and SlideTransition can be nested to create a combined fade-and-slide effect.

Q10. What is the difference between Hero and PageRouteBuilder?

PageRouteBuilder controls a custom route transition, while Hero connects a shared element between two routes.

68. Quick Revision

• Page transitions animate navigation between routes.
• Navigator.push() adds a route to the navigation stack.
• MaterialPageRoute provides Material-oriented route behavior.
• CupertinoPageRoute provides iOS-oriented route behavior.
• PageRouteBuilder is used for custom route transitions.
• pageBuilder creates the destination page.
• transitionsBuilder defines the route animation.
• The route provides an animation value that can drive transition widgets.
• Tween maps animation progress to another value type.
• CurveTween applies an easing curve.
• CurvedAnimation can also apply a curve.
• SlideTransition creates slide effects.
• FadeTransition creates fade effects.
• ScaleTransition creates scale effects.
• RotationTransition creates rotation effects.
• Multiple transition widgets can be combined.
• Hero animations can be combined with page transitions.
• Good page transitions should be smooth, purposeful, and consistent.

69. Learning Outcome

After studying Page Transition Animations, you should be able to:

• Understand route and page transitions.
• Use MaterialPageRoute and CupertinoPageRoute.
• Understand PageRouteBuilder.
• Use pageBuilder and transitionsBuilder.
• Work with route animation values.
• Use Tween and CurveTween.
• Use CurvedAnimation.
• Create slide transitions.
• Create fade transitions.
• Create scale transitions.
• Create rotation transitions.
• Combine multiple transition effects.
• Create reusable custom route classes.
• Configure page transition behavior.
• Combine Hero animations with page transitions.
• Build smooth and consistent navigation experiences.

70. JustAcademy Flutter Resources

Learn more about Flutter development through the following resources:

• JustAcademy Flutter Training Course
• Register for Flutter Course Demo

71. Summary

Page Transition Animations are an important part of Flutter navigation. They control how a new route enters the screen and how navigation feels to the user. Flutter provides standard route classes such as MaterialPageRoute and CupertinoPageRoute, while PageRouteBuilder allows developers to create custom transitions.

Custom page transitions commonly use the route's Animation together with Tween, CurveTween, or CurvedAnimation. Transition widgets such as SlideTransition, FadeTransition, ScaleTransition, and RotationTransition can then transform the destination page. These techniques can also be combined with Hero animations to create rich and meaningful navigation experiences.